<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="./node_modules/jquery-ui/themes/base/all.css">
    <style type="text/css">
        @import "./script/svg/jquery.svg.css?vno=8";
        @import "./script/css/oldc.css?vno=8";
        .svgText{
            position: fixed;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100px;
        }
        select {
            height: 30px;
            width: 204px!important;
        }
        textarea{
            width: 200px!important;
            height: 50px;
        }
        input[type=text]{
            height: 26px;
            width: 200px!important;
        }
        .form-group{
            margin-bottom: 10px;
        }
        .form-group label{
            text-align: left;
            width: 100px;
            display: inline-block;
            vertical-align: center;
        }

        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px;
        }
        .pagination>li {
            display: inline;
        }

        .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .pagination>li:first-child>a, .pagination>li:first-child>span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .pagination>li>a {
            background: #fafafa;
            color: #666;
        }
        .pagination-sm>li>a, .pagination-sm>li>span {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
        }
        .pagination>li>a, .pagination>li>span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .blue{
            color: #1971a8;
            font-size: 14px;
        }
        .pagination .current a{
            background-color: rgba(10, 10, 10, 0.31)!important;
        }
    </style>
    <script type="text/javascript" src="./script/common.js"></script>
    <script src="./node_modules/requirejs/require.js"></script>

</head>
<body>

<div id="view_window">
    <div id="svgcontainer"></div>
</div>
<div class="block" style="width: 260px;">
    <div id="selected_object" class="warning">Please select an object to activate these controls</div>
    <div class="controls_separator"></div>
    <fieldset>
        <legend>Actions</legend>
        <#if option=='operate'>
        <button type="button" style="width: 60px;" class="button red " name="undo" id="undo_button">Undo</button>
        <button type="button" style="width: 60px;" class="button blue " name="save_button" id="save_button">Save</button>
        </#if>
        <button type="button" style="width: 60px;" class="button yellow object_control_button" name="info_button" id="info_button">Info</button>
        <div>
            <div style="float: left">
                <embed src="./svg/lines.svg" style="display:block;width:50px;height:50px"/>
                <input type="checkbox" id="line" class="line">
            </div>
            <div style="float: left;">
                <embed src="./svg/arrows.svg" style="display:block;width:50px;height:50px"/>
                <input type="checkbox" id="arrow" class="line">
            </div>
            <div style="clear:both;"></div>
            <div class="controls_separator"></div>
            <div id="size_title" class="controls_title">Size: 0</div>
            <div id="size_slider" class="controls_slider"></div>
            <div class="controls_separator"></div>
            <div id="angle_title" class="controls_title">Angle: 0</div>
            <div id="angle_slider" class="controls_slider"></div>
        </div>
    </fieldset>
    <fieldset style="margin: 20px 0px 20px 0px">
        <legend>Layers</legend>
        <button class="button green object_control_button" name="bringToFront" id="bringToFront">Bring to front</button>
        <button class="button green object_control_button" name="bringToBack" id="bringToBack">Bring to back</button>
        <div class="clear_left"></div>
        <button class="button green object_control_button" style="width: 210px;" name="removeObject" id="removeObject">Remove this object</button>
        <div class="clear_left"></div>
        <button class="button green object_control_button" style="width: 210px;" name="unselectObject" id="unselectObject">Unselect this object</button>
        <div class="clear_left"></div>
        <!--<button class="button green object_control_button" name="removeAllObject" id="removeAllObject">Clear the canvas</button>-->
    </fieldset>

    <div id="objectlist_title" class="controls_title" style="margin-top: 100px;">Show the selected object list:</div>
    <div class="clear_left"></div>
    <select id="objectlist_selection" class="single_button">
        <#list catagorys as obj>
            <option <#if (obj.value)! == 'Backgrounds'> selected="selected"</#if> value="${(obj.value)!}">${(obj.name)!}</option>
        </#list>
    </select>
<div class="clear_left"></div>
<div class="controls_separator"></div>
    <div id="objectlist_selection_details" class="single_button">
          Total:  <i class="blue" id="page_count">3</i> Records
        <ul class="pagination pagination-sm no-margin pull-right">
            <li class="paginItem"><a href="javascript:void(0);">«</a></li>
            <li id="page_1" class="paginItem current"><a href="javascript:void(0);">1</a></li>
            <li id="page_2" class="paginItem" style="display: none;"><a href="javascript:void(0);">2</a></li>
            <li id="page_3" class="paginItem" style="display: none;"><a href="javascript:void(0);">3</a></li>
            <li id="page_4" class="paginItem" style="display: none;"><a href="javascript:void(0);">4</a></li>
            <li id="page_5" class="paginItem" style="display: none;"><a href="javascript:void(0);">5</a></li>
            <li class="paginItem"><a href="javascript:void(0);">»</a></li>
        </ul>
    </div>

<div id="dialog-form" title="Details">
    <div id="dialog-form-content">
    </div>
</div>
</div>
<script>
    require.config({
        baseUrl: '',
        urlArgs: "bust=" +  (new Date()).getTime(),
        paths: {
            'jquery': 'node_modules/jquery/dist/jquery',
            'jqueryplugin': 'node_modules/jquery-maxlength/jquery.plugin',
            'maxlength': 'node_modules/jquery-maxlength/jquery.maxlength',
            'validation': 'node_modules/jquery-validation/dist/jquery.validate',
            'domReady': 'node_modules/requirejs-domready/domReady',
            'jquerysvg': 'script/svg/jquery.svg',
            'utils':'script/utils',
            'page':'script/page',
            'service':'script/service',
            'oldc_classes': 'script/oldc.classes',
            'oldc_events': 'script/oldc-events',
            'oldc_v3': 'script/oldc-v3',
            'oldc_history': 'script/oldc.history',
        },
        shim: {
            'jqueryplugin': ['jquery'],
            'maxlength': ['jqueryplugin'],
            'validation':['jquery'],
            'jquerysvg': ['jquery'],
            'oldc_classes': ['oldc_history', 'maxlength','page'],
            'oldc_events': ['oldc_classes'],
            'oldc_v3': ['oldc_events','validation', 'jquerysvg', 'node_modules/jquery-ui/ui/widgets/slider','node_modules/jquery-ui/ui/widgets/dialog']
        }
    });
    require(['utils','service','oldc_v3'], function () {
        console.log("启动程序")
    })
</script>
</body>
</html>